<!DOCTYPE html>
<!-- saved from url=(0027)https://layui.newphper.com/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui 在线主题样式生成工具</title>
    <link rel="stylesheet" href="./layui 在线主题样式生成工具_files/layui.css" media="all">
    <style>
        .layui-header{background: #000000}
        span.layui-nav-bar{display: none!important;}
        .layui-nav .layui-this:after {
            display: none!important;
        }
        /*菜单*/
        .menu-item{display: none}
        .menu-item.menu-this{display: block}
        /*复制弹层*/
        .copyCssWrap{display: none}
        .copyCssWrap textarea{
            width: 625px;
            height: 260px;
            border: 10px solid #F8F8F8;
            border-top-width: 0;
            padding: 10px;
            line-height: 20px;
            overflow: auto;
            background-color: #3F3F3F;
            color: #eee;
            font-size: 12px;
            font-family: Courier New;
        }
        .copyCssWrap  a {
            position: absolute;
            right: 20px;
            bottom: 20px;
        }

        #pre{width: 100%;height: 100%;border: none}
        .layui-side{width: 300px!important;}
        .layui-body{left: 300px!important;overflow: hidden}
        .layui-footer{left: 300px!important;background-color: #f5f7fa!important;}
        #flow-container li{height: 60px;margin-bottom: 15px;}
        #flow-container li .color-box{width: 60px;height: 100%;}
        #flow-container li .btn-group{margin-left: 100px;}
        #flow-container li .like-btn{background: none;}
        #flow-container li .liked{color: #FF5722;}

        .tools-box{border-right: 1px solid #eeeeee;}
        .tools-box .main {margin-top: 15px}
        .tools-box .main label{color: #606266;font-size: 14px;padding-bottom: 8px;display: block;}
        .menu-select-box input{background: none;border-width: 0 0 1px 0}

        /*颜色系统*/
        .color-picker-input-box{cursor:pointer}
        /*隐藏清空按钮*/
        .layui-colorpicker-main-input button[colorpicker-events=clear]{display: none!important;}
    </style>
    <style>
        .layui-layout-admin .layui-logo { color: #0f1716 } .layui-elem-quote { border-left-color: #0f1716 } .layui-btn { background-color: #0f1716  } .layui-btn-primary { background-color: #fff } .layui-btn-primary:hover { border-color: #0f1716 } .layui-btn-group .layui-btn-primary:hover { color: #0f1716 } .layui-laypage a:hover { color: #0f1716 } .layui-laypage .layui-laypage-curr .layui-laypage-em { background-color: #0f1716 } .layui-laypage select:focus { border-color: #0f1716 !important } .layui-upload-drag .layui-icon { font-size: 50px; color: #0f1716 } .layui-upload-drag[lay-over] { border-color: #0f1716 } .layui-nav-tree .layui-nav-child dd.layui-this a { background-color: #0f1716 } .layui-nav-tree .layui-nav-bar { background-color: #0f1716 } .layui-tab-brief > .layui-tab-title .layui-this { color: #0f1716 } .layui-slider-input-btn i:hover { color: #0f1716 } .layui-slider-wrap-btn { border-color: #0f1716 !important } .layui-slider-bar { background: #0f1716 !important } html .layui-laydate .layui-this { background-color: #0f1716 !important } .laydate-theme-molv .layui-laydate-header { background-color: #0f1716 } .laydate-theme-grid .laydate-selected, .laydate-theme-grid .laydate-selected:hover { color: #0f1716 !important } .layui-progress-bar { background-color: #01aaed } .layui-form-select dl dd.layui-this { background-color: #01aaed } .layui-form-checked, .layui-form-checked:hover { border-color: #01aaed } .layui-form-checked span, .layui-form-checked:hover span { background-color: #01aaed } .layui-form-checked i, .layui-form-checked:hover i { color: #01aaed } .layui-form-checkbox[lay-skin=primary]:hover i { border-color: #01aaed } .layui-form-checked[lay-skin=primary] i { border-color: #01aaed; background-color: #01aaed } .layui-form-onswitch { border-color: #01aaed; background-color: #01aaed } .layui-form-radio > i:hover, .layui-form-radioed > i { color: #01aaed } .layui-table-edit:focus { border-color: #01aaed !important } .layui-nav-tree .layui-nav-itemed:after { background-color: #01aaed } .layui-nav-child dd.layui-this { background-color: #01aaed } .layui-nav .layui-nav-child dd.layui-this a { background-color: #01aaed } .layui-breadcrumb a:hover { color: #01aaed !important } .layui-tab-brief > .layui-tab-more li.layui-this:after, .layui-tab-brief > .layui-tab-title .layui-this:after { border-bottom: 2px solid #01aaed } .layui-tab-card > .layui-tab-more .layui-this { color: #01aaed } .layui-timeline-axis { color: #01aaed } .laydate-day-mark::after { background-color: #01aaed !important } .layui-laydate-header i:hover, .layui-laydate-header span:hover { color: #01aaed !important } .layui-laydate-footer span:hover { color: #01aaed !important } .layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after { background-color: #01aaed !important } .layui-btn-normal{background-color: #b89a9a;} .layui-btn-warm{background-color: #3c5b70;} .layui-btn-danger{background-color: #fc0000;} .layui-btn-disabled,.layui-btn-disabled:hover,.layui-btn-disabled:active{background-color: #FBFBFB;}
    </style>
<link id="layuicss-laydate" rel="stylesheet" href="./layui 在线主题样式生成工具_files/laydate.css" media="all"><link id="layuicss-layer" rel="stylesheet" href="./layui 在线主题样式生成工具_files/layer.css" media="all"><link id="layuicss-skincodecss" rel="stylesheet" href="./layui 在线主题样式生成工具_files/code.css" media="all"><script type="text/javascript" src="chrome-extension://dbjbempljhcmhlfpfacalomonjpalpko/scripts/inspector.js"></script><input type="hidden" id="_w_brink"></head>
<body class="layui-layout-body">
<div class="layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo"><h3 style="color: #ffffff;cursor:pointer">Layui Theme Builder</h3></div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a id="usage" href="javascript:;">使用说明</a></li>
            <li class="layui-nav-item"><a id="update-log" href="javascript:;">更新日志</a></li>
            <li class="layui-nav-item"><a href="https://layui.newphper.com/themes.html">浏览主题<span class="layui-badge">445</span></a></li>
<!--            <li class="layui-nav-item" style="margin-left: 30px">-->
<!--                <a id="ad-knife" target="_blank" href="https://s.click.taobao.com/GBHB0lv"></a>-->
<!--            </li>-->
<!--            <li class="layui-nav-item"><a href="javascript:;" id="feedback">渴望更多建议</a></li>-->
<!--            <li class="layui-nav-item"><a target="_blank" href="https://www.layui.com">Layui 官网</a></li>-->
        <span class="layui-nav-bar"></span></ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a id="publishTheme" class="layui-btn layui-btn-danger" href="javascript:;" style="margin-top: 11px">
                    <i class="layui-icon layui-icon-upload-drag"></i>发布我的主题
                </a>
            </li>
            <li class="layui-nav-item">
                <a id="copyCss" class="layui-btn layui-btn-normal" href="javascript:;" style="margin-left:1px;margin-top: 11px">
                    <i class="layui-icon layui-icon-fonts-code"></i>复制 CSS
                </a>
            </li>
            <li class="layui-nav-item">
                <a id="getTheme" class="layui-btn layui-btn-warm" href="javascript:;" style="margin-left:1px;margin-top: 11px">
                    <i class="layui-icon layui-icon-download-circle"></i>下载此主题
                </a>
            </li>
        <span class="layui-nav-bar" style="left: 72.5px; top: 44px; width: 0px; opacity: 0;"></span></ul>
    </div>
    <div class="layui-side tools-box">
        <div class="layui-main">
            <div class="layui-form menu-select-box">
                <select lay-filter="menu">
                    <option value="color">颜色系统</option>
                    <option value="button">按钮</option>
                    <option value="form">表单</option>
                </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="颜色系统" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="color" class="layui-this">颜色系统</dd><dd lay-value="button" class="">按钮</dd><dd lay-value="form" class="">表单</dd></dl></div>
            </div>
            <div class="main">
                <div class="layui-form menu-item menu-this" id="menu-color">
                    <div class="layui-form-item">
                        <label>主题色 primary</label>
                        <div class="layui-input-inline color-picker-input-box">
                            <input value="" placeholder="作用于按钮、修饰元素等" class="layui-input color-input" disabled="">
                        </div>
                        <div class="layui-inline" style="">
                            <div data-default="#009688" class="color-picker-box layui-inline" id="primary"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #009688"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label>辅色 secondary</label>
                        <div class="layui-input-inline color-picker-input-box">
                            <input value="" placeholder="作用于选中状态等" class="layui-input color-input" disabled="">
                        </div>
                        <div class="layui-inline">
                            <div data-default="#5fb878" class="color-picker-box layui-inline" id="secondary"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #5fb878"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label>百搭 normal</label>
                        <div class="layui-input-inline color-picker-input-box">
                            <input value="" placeholder="百搭按钮等" class="layui-input color-input" disabled="">
                        </div>
                        <div class="layui-inline">
                            <div data-default="#1E9FFF" class="color-picker-box layui-inline" id="normal"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #1E9FFF"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label>暖色 warm</label>
                        <div class="layui-input-inline color-picker-input-box">
                            <input value="" placeholder="暖色按钮等" class="layui-input color-input" disabled="">
                        </div>
                        <div class="layui-inline">
                            <div data-default="#FFB800" class="color-picker-box layui-inline" id="warm"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #FFB800"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label>警告 danger</label>
                        <div class="layui-input-inline color-picker-input-box">
                            <input value="" placeholder="警告按钮等" class="layui-input color-input" disabled="">
                        </div>
                        <div class="layui-inline">
                            <div data-default="#FF5722" class="color-picker-box layui-inline" id="danger"><div class="layui-unselect layui-colorpicker"><span><span class="layui-colorpicker-trigger-span" lay-type="" style="background: #FF5722"><i class="layui-icon layui-colorpicker-trigger-i layui-icon-down"></i></span></span></div></div>
                        </div>
                    </div>
                </div>
                <div class="layui-form menu-item" id="menu-button">
                    <div class="layui-form-item">
                        <label>圆角 border-radius</label>
                        <div class="layui-input-inline">
                            <input name="button-border_radius" value="2" placeholder="" class="layui-input" type="number">
                        </div>
                        <div class="layui-form-mid">
                            px
                        </div>
                    </div>
                </div>
                <div class="layui-form menu-item" id="menu-form">
                    <div class="layui-form-item">
                        <label>圆角 border-radius</label>
                        <div class="layui-input-inline">
                            <input name="form-border_radius" value="2" placeholder="" class="layui-input" type="number">
                        </div>
                        <div class="layui-form-mid">
                            px
                        </div>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field">
                更多自定义功能，敬请期待！
<!--                <legend>看看其他人制作的主题</legend>-->
<!--                <div class="layui-field-box" id="flow-box">-->
<!--                    <ul id="flow-container">-->
<!--                    </ul>-->
<!--                </div>-->
            </fieldset>
        </div>

    </div>
    <div class="layui-body">
        <iframe id="pre" src="./layui 在线主题样式生成工具2.html" __idm_frm__="102"></iframe>
    </div>
    <div class="layui-footer">
        <span style="float: right">
            本站CDN由 <a target="_blank" href="https://www.layuicdn.com/">LayuiCdn</a> 提供
        </span>
        <span>BUG 反馈、建议、交流群：<strong>794901098</strong></span>
    </div>
</div>

<div id="copyCssWrap" class="copyCssWrap layui-layer-wrap">
  <textarea id="cssTextarea">
  </textarea>
    <a href="javascript:;" id="copyCssBtn" class="layui-btn layui-btn-normal" data-clipboard-target="#cssTextarea">一键复制</a>
</div>

<script src="./layui 在线主题样式生成工具_files/hm.js.下载"></script><script src="./layui 在线主题样式生成工具_files/layui.all.js.下载"></script>
<script src="./layui 在线主题样式生成工具_files/clipboard.min.js.下载"></script>

<script>
    var $ = layui.jquery,
        layer = layui.layer,
        form = layui.form,
        colorpicker = layui.colorpicker,
        flow = layui.flow,
        laytpl = layui.laytpl,
        loading,
        preEle = $("#pre");
    var newStyle = {
        color:{}
    };

    // 执行预览
    function preview () {
        var previewEle = document.getElementById('pre');
        previewEle.contentWindow.changeStyle(newStyle)
    }

    // 颜色系统 - 渲染颜色选择器
    $(".color-picker-box").each(function(index, item){
        var elemId = $(item).attr('id')
            ,defaultColor = $(item).data('default');
        colorpicker.render({
            elem: '#'+elemId
            ,color: defaultColor
            ,predefine: true
            ,change: function(color){
                $(item).parents('.layui-form-item').find('.color-input').val(color);
                newStyle.color[elemId] = color;
                preview();
            }
        });
    });

    // 监听菜单选择
    form.on('select(menu)', function(data){
        var value = data.value, //得到被选中的值
            targetItem = $("#menu-"+value);
        if (targetItem.hasClass('menu-this')) {
            return false;
        }
        $(".menu-this").removeClass("menu-this");
        targetItem.addClass('menu-this');
        // 切换与蓝窗 tab
        if (value !== 'color'){
            var previewEle = document.getElementById('pre');
            previewEle.contentWindow.changeTab(value);
        }
    });

    // 加载预览窗口 iframe
    $(function () {
        loading = layer.load(2);
        preEle.attr('src','./layui 在线主题样式生成工具_files/preview.html');
        preEle.load(function () {
            layer.close(loading);
        });
    });

    // 监听input值改变
    $('input').on('change',function () {
       var elem = $(this),
           obj_arr = elem.attr('name').split("-"),
           value = elem.val();
       if (! newStyle[obj_arr[0]]){
           newStyle[obj_arr[0]] = {};
       }
       newStyle[obj_arr[0]][obj_arr[1]] = value;
       preview();
    });

    $("#publishTheme").click(function () {
        var previewEle = document.getElementById('pre');
        previewEle.contentWindow.publishTheme();
    });

    $("#getTheme").click(function () {
        var previewEle = document.getElementById('pre');
        previewEle.contentWindow.getTheme();
    });

    $("#copyCss").click(function () {
        var previewEle = document.getElementById('pre');
        var currentCss = previewEle.contentWindow.getCurrentCss();
        if (currentCss !== false){
            $('#copyCssWrap textarea').html(currentCss);
            layer.open({
                type: 1
                ,title: '复制 CSS'
                ,moveType: 1
                ,id: 'Copy_Css'
                ,content: $('#copyCssWrap')
                ,maxWidth: '100%'
            });
        }
    });

    // 监听复制事件
    var clipboard = new ClipboardJS('#copyCssBtn');

    clipboard.on('success', function(e) {
        layer.msg('已复制');
        e.clearSelection();
    });

    function like(ele) {
        $.ajax({
            url:'/index/like.html'
            ,type:'post'
            ,data:{theme:$(ele).data('theme')}
            ,success: function () {
                var num = $(ele).find('.num');
                num.html(parseInt(num.html())+1);
            }
        })
    }

    $("#usage").click(function () {
        layer.open({
            type: 1
            ,title: '使用说明'
            ,closeBtn: 2
            ,area: '500px;'
            ,shade: 0.3
            ,id: 'usage-layer' //设定一个id，防止重复弹出
            ,content: '<div style="padding: 50px; line-height: 22px; font-weight: 300;"><h2>Layui在线主题生成工具</h2><br><p>\n' +
                '            本工具可以很方便地预览主题色改变之后的视觉，通过替换主题色，能够让视觉更加符合具体项目的定位。\n' +
                '        </p><p>\n' +
                '            使用方式：下载后，在 layui.css 下方引入即可。\n' +
                '        </p></div>'
        });
    });

    $("#update-log").click(function () {
        layer.open({
            type: 2
            ,title: '更新日志'
            ,closeBtn: 2
            ,area: ['auto']
            ,shade: 0.3
            ,id: 'update-log-layer' //设定一个id，防止重复弹出
            ,content: '/update_log'
        });
    });

    $("#feedback").click(function () {
        layer.prompt({
            formType: 2
            ,title: '真的非常非常开心你能点开，很渴望能得到你的建议，满足我吧！笔芯~'
            ,value: ''
            ,btn: ['提交', '老子才不 D 你']
        }, function(value, index, elem){
            $.ajax({
                url:'/index/feedback.html'
                ,type:'post'
                ,data:{content:value}
            });
            layer.close(index);
            layer.msg('你是我见过最可爱的人！')
        });

    });


    // var knifeAds = [
    //     '这也许是你人生的第一把刀',
    //     '谁说程序员不能成为主厨？',
    //     '买把菜刀赞助我吧！'
    // ],knifeAdsIndex = 0;
    // setInterval(function () {
    //     if (knifeAdsIndex >= knifeAds.length){
    //         knifeAdsIndex = 0;
    //     }
    //     $("#ad-knife").html(knifeAds[knifeAdsIndex]).addClass('layui-anim-up');
    //     knifeAdsIndex ++;
    // },2000);
</script>

<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?dfe7d50210d517e00b30c2a7716edce4";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>

<div class="layui-layer-move"></div></body></html>